<template>
    <div id="main" style="width: 600px; height: 500px;"></div>
  </template>

  <script>
  import * as echarts from 'echarts';

  export default {
    mounted() {
      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '职业热点图',
          subtext: 'Hot Work',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['软件开发工程师', '测试工程师', '运维工程师', '网络安全', '其他']
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              { value: 35, name: '软件开发工程师' },
              { value: 30, name: '测试工程师' },
              { value: 25, name: '运维工程师' },
              { value: 15, name: '网络安全' },
              { value: 46, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
  </script>
